import React, { Component } from 'react'
import { Breadcrumb, Card, Cascader, Input, Table, Tag, Space, Steps, Tooltip, Button, message, Modal, Form } from 'antd'
import { EditOutlined, CarOutlined } from '@ant-design/icons'
import { getOrders } from '../../../api/order'
import {cityData} from '../../../api/citydata'
const {Step} = Steps
export default class OrderList extends Component {
  state = {
    editOrderAddressModalVisiable:false,
    transitionVisiable:false,
    orderList:[],
    queryInfo:{
      query:"",
      pagenum:1,
      pagesize:10, 
    },
    total:0,
    orderColumns:[
      {
        title:"",
        align:"center",
        render: (text,record,index) => index + 1
      },
      {
        title:"订单编号",
        align:"center",
        dataIndex:"order_number",
      },
      {
        title:"订单金额",
        align:"center",
        dataIndex:"order_price"
      },
      {
        title:"是否付款",
        render:(text,record) => {
          if(record.order_pay==='1'){
            return <Tag color="green">已付款</Tag>
          }else{
            return <Tag color="red">未付款</Tag>
          }
        }
      },
      {
        title:"是否发货",
        dataIndex:"is_send"
      },
      {
        title:"下单时间",
        render:(text,record) =>{
          const date = new Date(record.create_time*1000)
          return date.toLocaleString()
        }
      },
      {
        title:"操作",
        render:(text,record) => {
          return (
            <Space>
              <Tooltip title="修改订单地址" placement="top">
                <Button type="primary" onClick={this.showEditOrderAddress} icon={<EditOutlined/>}/>
              </Tooltip>
              <Tooltip title="查看物流" placement="top">
                <Button style={{backgroundColor:"#00dd00"}} onClick={this.showOrderTransition} icon={<CarOutlined />}/>
              </Tooltip>
            </Space>
          )
        }
      }
    ]
  }
  getOrderList =async () =>{
    const res = await getOrders(this.state.queryInfo)
    if(res.meta.status !== 200){
      message.error(res.meta.msg);
    }else{
      this.setState({
        orderList:res.data.goods,
        total:res.data.total
      })
    }
  }
  searchOrder = async (value) => {
    await this.setState({
      queryInfo:{
        query:value,
        pagenum:this.state.queryInfo.pagenum,
        pagesize:this.state.queryInfo.pagesize
      }
    })
    this.getOrderList();
  }
  showEditOrderAddress = () =>{
    this.setState({
      editOrderAddressModalVisiable:true
    })
  }
  showOrderTransition = ()=>{
    this.setState({
      transitionVisiable:true,
    })
  }
  paginationChange = async (pagenum,pagesize) =>{
    await this.setState({
      queryInfo:{
        query:this.state.queryInfo.query,
        pagenum,
        pagesize,
      }
    })
    this.getOrderList()
  }
  handleCancelEditOrderAddress = () =>{
    this.refs.editAddressFormRef.resetFields()
    this.setState({
      editOrderAddressModalVisiable:false,
    })
  }
  handleOKEditOrderAddress = () =>{
    this.handleCancelEditOrderAddress()
  }
  componentDidMount(){
    this.getOrderList()
  }
  render() {
    return (
      <div>
        <Card>
          <Breadcrumb>
            <Breadcrumb.Item>首页</Breadcrumb.Item>
            <Breadcrumb.Item>订单管理</Breadcrumb.Item>
            <Breadcrumb.Item>订单列表</Breadcrumb.Item>
          </Breadcrumb>
          <Input.Search placeholder="请输入搜索内容" style={{width:200,marginTop:"10px"}} onSearch={this.searchOrder}/>
          <Table
            style={{marginTop:"10px"}}
            columns={this.state.orderColumns}
            dataSource={this.state.orderList}
            bordered
            pagination={{
              total:this.state.total,
              showQuickJumper:true,
              showSizeChanger:true,
              pageSizeOptions:["5","10","15","20"],
              onChange:this.paginationChange
            }}
          >
          </Table>
        </Card>
        <Modal 
          title="修改地址" 
          visible={this.state.editOrderAddressModalVisiable}
          onCancel={this.handleCancelEditOrderAddress}
          onOk={this.handleOKEditOrderAddress}
        >
          <Form
            ref="editAddressFormRef"
            labelAlign="right"
            labelCol={{span:5}}
          >
            <Form.Item label="省市县" name="address" rules={[{required:true,message:"请选择城市"}]}>
              <Cascader fieldNames={{label:"name",value:"id",children:"sub"}} options={cityData}  placeholder="请选择城市" />
            </Form.Item>
            <Form.Item label="详细地址" name="detail" rules={[{required:true,message:"请填写详细地址"}]}>
              <Input/>
            </Form.Item>
          </Form>
        </Modal>
        <Modal 
          title="物流信息" 
          visible={this.state.transitionVisiable} 
          onOk={_=>this.setState({transitionVisiable:false})}
          onCancel={_=>this.setState({transitionVisiable:false})}
        >
          <Steps direction="vertical" current={1}>
            <Steps.Step title="Finished" description="This is a description." />
            <Steps.Step title="Finished" description="This is a description." />
            <Steps.Step title="Finished" description="This is a description." />
            <Steps.Step title="Finished" description="This is a description." />
            <Steps.Step title="Finished" description="This is a description." />
            <Steps.Step title="Finished" description="This is a description." />
          </Steps>
        </Modal>
      </div>
    )
  }
}
